<template>
  <div class="page">
    <!--短视频详情-->
    <el-card class="card">
      <div class="card-title">短视频详情</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in details">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                <div class="data-text" v-if="i.type==='string'">{{ i.data }}</div>
                <div class="data-text" v-else-if="i.type==='img'">
                  <!--                  <el-image-->
                  <!--                    style="width: 75px; height: 75px"-->
                  <!--                    src="./logo1.jpg"-->
                  <!--                    preview-src-list="['./logo1.jpg']">-->
                  <!--                  </el-image>-->
                  <img src="./logo1.jpg" style="width:75px;height:75px;"/>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr class="last-tr">
          <td colspan="3">
            <div class="last-item">
              <div class="last-label"><div class="last-text">简介</div></div>
              <div class="last-data">
                <div class="data-text">{{ content }}</div>
              </div>
            </div>
          </td>
        </tr>
        <tr class="last-tr" v-if="refusedState">
          <td colspan="3">
            <div class="last-item">
              <div class="last-label"><div class="last-text">拒绝原因</div></div>
              <div class="last-data">{{ reason }}</div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--短视频内容-->
    <el-card class="card">
      <div class="card-title">
        <div class="left">短视频内容</div>
        <div class="right">
          <el-button type="success" @click="download">下载视频</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="video">
        <video width="55%" height="500" :src="url" controls></video>
      </div>
    </el-card>

    <!--商品橱窗-->
    <el-card class="card">
      <div class="card-title">商品橱窗</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="shopWindowData" stripe>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="picture" label="图片" align="center">
            <img src="./logo1.jpg" style="width:50px;height:50px;"/>
          </el-table-column>
          <el-table-column prop="price" label="价格(￥)" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" align="center"></el-table-column>
          <el-table-column prop="link" label="商品外部链接" align="center"></el-table-column>
          <el-table-column prop="salesVolume" label="当前销量" align="center"></el-table-column>
          <el-table-column prop="salesTotal" label="累计销售金额(￥)" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleProductSizeChange"
            @current-change="handleProductCurrentChange"
            :current-page="shopWindow.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="shopWindow.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="shopWindow.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--订单销售情况-->
    <el-card class="card"  v-if="!notRelease">
      <div class="card-title">订单销售情况</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="salesData" stripe>
          <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
          <el-table-column prop="commodityName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="commodityNumber" label="商品数量" align="center"></el-table-column>
          <el-table-column prop="orderAmount" label="下单金额(￥)" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleSalesSizeChange"
            @current-change="handleSalesCurrentChange"
            :current-page="sales.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="sales.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="sales.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--评论-->
    <!--    v-loading="loading"-->
    <el-card class="card" v-if="!notRelease">
      <div class="card-title">评论(8888)</div>
      <el-divider></el-divider>
      <div class="comments">
        <div v-for="(item,index) in comments">
          <!--父评论-->
          <div class="parent">
            <div class="left">
              <img src="./logo1.jpg" />
            </div>
            <div class="right">
              <div class="right-top">
                <div class="name">{{ item.nickname }}</div>
                <div class="tag">
                  <el-tag v-if="item.role=='author'" type="danger" effect="dark">作者</el-tag>
                </div>
              </div>
              <div class="comment-content">{{ item.content }}</div>
              <div class="right-bottom">
                <div class="time">{{ item.date }}</div>
                <div class="reply">
                  <el-button @click="reply" type="text">回复</el-button>
                </div>
              </div>
            </div>
          </div>
          <!--子评论-->
          <div class="child" v-if="item.child" v-for="i in item.child">
            <div class="left">
              <img src="./logo1.jpg" />
            </div>
            <div class="right">
              <div class="right-top">
                <div class="name">{{i.nickname}}</div>
                <div class="tag">
                  <el-tag v-if="i.role == 'author'" type="danger" effect="dark">作者</el-tag>
                  <span v-if="i.reply">回复 {{i.reply}}</span>
                </div>
              </div>
              <div class="comment-content">{{i.content}}</div>
              <div class="right-bottom">
                <div class="time">{{i.date}}</div>
                <div class="reply">
                  <el-button @click="reply" type="text">回复</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more">
          <div @click="viewMore" class="content">
            <div v-show="!loading">查看更多<i class="el-icon-caret-bottom"></i></div>
            <div v-show="loading">加载中<i class="el-icon-loading"></i></div>
          </div>
        </div>
      </div>
    </el-card>

    <!--备注-->
    <el-card class="card">
      <div class="card-title">
        <div class="left">备注</div>
        <div class="right">
          <el-button type="success" @click="editNote">编辑</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="note">
        {{ note }}
      </div>
    </el-card>
    <remark @close="closeEditNote" :id="id" :is-remark="isRemark"></remark>
    <reply @close="closeReply" :is-reply="isReply"></reply>
  </div>
</template>

<script>
import Remark from '@/framework/components/dialog/short-video/draft/remark'
import Reply from '@/framework/components/dialog/short-video/draft/reply'
import PageMixin from '@/framework/mixins/pageMixin'
import {get} from '@/project/service/video'
import {findByVideo} from "@/project/service/product";

export default {
  name: "show",
  mixins: [
    PageMixin,
    // Normalize(search, count)
  ],
  data(){
    return{
      id:'',
      //短视频详情
      details:[
        [
          {label:"标题",data:'',type:'string',title:'title'},
          {label:"视频来源",data:'',type:'string',title:'source'},
          {label:"视频上传时间",data:'',type:'string',title:'creationTime'}
        ],
        [
          {label:"发布时间",data:'',type:'string',title:'publishTime'},
          {label:"播放量",data:'',type:'string',title:''},
          {label:"点赞数",data:'',type:'string',title:'praiseQuantity'}
        ],
        [
          {label:"评论数",data:'',type:'string',title:'commentsQuantity'},
          {label:"浏览量",data:'',type:'string',title:'viewerQuantity'},
          {label:"转发数",data:'',type:'string',title:'shareQuantity'}
        ],
        [
          {label:"状态",data:'',type:'string',title:'status'},
          {label:"频道",data:'',type:'string',title:'videoCategory'},
          {label:"标签",data:'',type:'string',title:'label'}
        ],
        [
          {label:"列表展示样式",data:'',type:'string',title:'style'},
          {label:"短视频ID",data:'',type:'string',title:'id'},
          {label:"视频大小(MB)",data:'',type:'string',title:'size'}
        ],
        [
          {label:"视频时长(s)",data:'',type:'string',title:'duration'},
          {label:"视频分辨率 ",data:'',type:'string',title:'resolvingPower'},
          {label:"视频码率(kbps)",data:'',type:'string',title:'bitRate'}
        ],
        [
          {label:"播放页面地址",data:'',type:'string',title:'path'},
          {label:"播放页面二维码(h5)",data:'',type:'img',title:'webQrCode'},
          {label:"播放页面二维码(小程序)",data:'',type:'img',title:'miniQrCode'}
        ],
      ],
      shopWindowData:[
        {name:'纯棉布料',picture:'888',price:'',type:'外部商品',link:'https://www.taobao.com',salesVolume:'',salesTotal:''},
        {name:'衬衫布料',picture:'888',price:'9.9',type:'SAAS商城商品',link:'',salesVolume:'10',salesTotal:'99'},
        {name:'帆布布料',picture:'888',price:'19.9',type:'外部商品',link:'https://www.taobao.com',salesVolume:'',salesTotal:''},
      ],//商品橱窗
      //商品橱窗的分页信息
      shopWindow:{
        page:1,
        pageSize:0,
        total:100,
      },
      salesData:[
        {nickname:'张三',orderNumber:'65452452154125324',commodityName:'纺织品',commodityNumber:'10',orderAmount:'653.12'},
        {nickname:'李四',orderNumber:'65452452154125325',commodityName:'纺织布料',commodityNumber:'1',orderAmount:'9554.50'},
        {nickname:'刘备',orderNumber:'65452452154125326',commodityName:'纺织布料',commodityNumber:'2',orderAmount:'65.00'},
        {nickname:'诸葛亮',orderNumber:'65452452154125327',commodityName:'纺织布料',commodityNumber:'5',orderAmount:'68.00'},
        {nickname:'关羽',orderNumber:'65452452154125328',commodityName:'纺织布料',commodityNumber:'1',orderAmount:'963.00'},
      ],//订单销售情况
      //订单销售情况的分页信息
      sales:{
        page:1,
        pageSize:0,
        total:100,
      },
      //评论
      comments:[
        {
          nickname:'张三',
          content:'我是真心喜欢这种穿搭，你们要是喜欢也可以去专柜试穿一下哦~',
          date:'2021-12-12 11:23',
          role:'author',
          child:[
            {
              nickname:'刘备',
              content:'感谢分享',
              date:'2021-12-12 11:23',
              role:'user',
            },
            {
              nickname:'张三',
              content:'冲冲冲！！！',
              date:'2021-12-12 11:23',
              role:'author',
              reply:'刘备',
            },
          ]
        },
        {
          nickname:'张飞',
          content:'感谢分享',
          date:'2021-12-12 11:23',
          role:'user',
        },
      ],
      add:[
        {
          nickname:'张三',
          content:'我是真心喜欢这种穿搭，你们要是喜欢也可以去专柜试穿一下哦~',
          date:'2021-12-12 11:23',
          role:'author',
          child:[
            {
              nickname:'刘备',
              content:'感谢分享',
              date:'2021-12-12 11:23',
              role:'user',
            },
            {
              nickname:'张三',
              content:'冲冲冲！！！',
              date:'2021-12-12 11:23',
              role:'author',
              reply:'刘备',
            },
          ]
        },
        {
          nickname:'张飞',
          content:'感谢分享',
          date:'2021-12-12 11:23',
          role:'user',
        }
      ],
      loading:false,//更多评论加载
      isRemark: false,//是否编辑备注
      isReply: false,//是否打开回复
      refusedState:false,//拒绝状态
      notRelease:false,//视频状态为待发布、待审核、已拒绝
      content:'',//简介
      reason:'',//拒绝原因
      url:'',//视频地址
      note:'电商直播服务商，集营销，引流，销售于一体，帮助电商快速开播，内嵌商城，加速购买决策，红包，拼团，秒杀等功能引爆直播气氛，小程序观看下单，流量沉淀无外流，打造专属私域流量池。电商直播服务商，集营销，引流，销售于一体，帮助电商快速开播，内嵌商城，加速购买决策，红包，拼团，秒杀等功能引爆直播气氛，小程序观看下单，流量沉淀无外流，打造专属私域流量池。',//备注内容
    }
  },
  components:{ Remark,Reply },
  created() {
    this.id = this.$route.params.id
    console.log('接收到的id:'+this.id)
    //通过id请求数据
    get({id: this.id}, data=>{
      // console.log('data')
      // console.log(data)
      this.getDetailsData(data)
      this.content = data.content
      this.reason = data.reason
    })
    this.findProduct(this.id)
  },
  methods:{
    //给视频详情表格中的各项的data赋值
    getDetailsData(data){
      this.details.forEach(item => {
        item.forEach(i =>{
          for(let di in data){
            if(i.title == di){
              if(di == 'videoCategory'){
                i.data = data[di].name
              }else if(di == 'style'){
                if(data[di] == 'image'){
                  i.data = '大图显示'
                }else if(data[di] == 'image_text'){
                  i.data = '图文显示'
                }
              }else if(di == 'status'){
                if (data[di] == 'pending') {
                  i.data = '待审核'
                  this.notRelease = true
                } else if (data[di] == 'rejected') {
                  i.data = '已拒绝'
                  his.refusedState = true
                  this.notRelease = true
                } else if (data[di] == 'unpublished') {
                  i.data = '待发布'
                  this.notRelease = true
                } else if(data[di] == 'published') {
                  i.data = '已发布'
                } else if(data[di] == 'removed') {
                  i.data = '已下架'
                }else if(data[di] == 'disabled'){
                  i.data = '已禁用'
                }
              }else if(di == 'path'){
                i.data = `${this.$store.state.prefix}${data[di]}`
                this.url = `https://${data[di]}`
              }else{
                i.data = data[di]
              }
              delete data[di]
            }
          }
        })
      })
    },
    //获取商品橱窗数据
    findProduct(id){
      let param = {
        product:{video:{id}},
        pageable:{
          page: this.shopWindow.page,
          size: this.shopWindow.pageSize,
          sort: 'id',
          desc: true
        }
      }
      console.log(param)
      findByVideo(param,data => {
        console.log(data)
        this.shopWindowData = data
      })
    },
    //编辑备注
    editNote(){
      this.isRemark = true
    },
    //关闭编辑备注
    closeEditNote(isRemark){
      this.isRemark = isRemark
    },
    //下载视频
    download(){
      fetch(this.url).then(res => res.blob()).then(blob => {
        const a = document.createElement('a');
        document.body.appendChild(a)
        a.style.display = 'none'
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = `${this.details[0][0].data}.mp4`;
        a.click();
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url);
      })
    },
    //获取评论
    getCommentList(){
      findByVideoOrLive({id:this.id,type:'video'},data => {
        console.log(data)
      })
    },
    //获取评论数量
    getCommentCount(){
      countByVideoOrLive({id:this.id,type:'video'},data => {
        console.log(data)
      })
    },
    //查看更多
    viewMore(){
      this.loading = true
      setTimeout(()=>{
        this.add.forEach(item=>{
          this.comments.push(item)
          this.loading = false
        })
      },1000)
    },
    //回复
    reply(){
      this.isReply = true
    },
    //关闭回复
    closeReply(isReply){
      this.isReply  = isReply
    },
    //商品橱窗页码改变
    handleProductCurrentChange(val) {
      this.shopWindow.page = val
      this.listUpdate()
    },
    //商品橱窗每页数据条数改变
    handleProductSizeChange(pageSize) {
      this.shopWindow.pageSize = pageSize
      this.listUpdate()
    },
    //订单页码改变
    handleSalesCurrentChange(val) {
      this.sales.page = val
      this.listUpdate()
    },
    //订单每页数据条数改变
    handleSalesSizeChange(pageSize) {
      this.sales.pageSize = pageSize
      this.listUpdate()
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;

  .card {
    margin-bottom: 25px;

    .card-title {
      display: flex;
      width: 100%;
      align-items: center;

      .right {
        flex: 1;
        display: flex;
        justify-content: right;
      }
    }

    .card-content {
      width: 100%;
      border: 1px solid #ededed;
      border-collapse: collapse;

      .last-item {
        display: flex;
        min-height: 80px;
        width: 100%;

        .last-label {
          width: 120px;
          border-right: 1px solid #ededed;
          background-color: #f2f2f2;
          min-heigth: 80px;
          text-align: center;

          .last-text {
            height:100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .last-data {
          flex:1;
          padding: 10px;
          display: flex;
          align-items: center;
          word-break:break-all;

          .data-text{
            width:100%;
          }
        }
      }

      tr:last-child {
        min-height: 80px;

        td:last-child {
          border-top: 1px solid #ededed;
        }
      }

      .tr {
        min-height: 80px;

        .td {
          border: 1px solid #ededed;
          min-height: 80px;
          overflow: hidden;

          .content-item {
            display: flex;
            min-height: 80px;

            .item-label {
              width: 120px;
              border-right: 1px solid #ededed;
              background-color: #f2f2f2;
              min-heigth: 80px;
              text-align: center;

              .label-text{
                height:100%;
                display: flex;
                justify-content: center;
                align-items: center;
              }

            }

            .item-data {
              padding: 10px;
              min-height:80px;
              display: flex;
              align-items: center;
              flex:1;
              word-break:break-all;

              .data-text{
                width:100%;
              }

              .click {
                color: rgb(0, 0, 238);
                text-decoration: underline;
                cursor: pointer;
              }

              .click:focus {
                color: rgb(85, 26, 139);
              }
            }
          }
        }
      }
    }

    .video{
      width:100%;
      text-align:center;
    }

    .pager-group{
      width:100%;
      margin: 20px 0;
    }

    .comments {
      max-height: 500px;
      overflow-y: auto;

      .parent {
        display: flex;
        min-height: 80px;
        width: 100%;
        margin-bottom: 10px;

        .left {
          text-align: center;
          width: 60px;

          img {
            width: 50px;
            height: 50px;
          }
        }

        .right {
          margin-left: 10px;
          width:100%;
          border-bottom: 1px solid #d9d9d9;

          .right-top {
            display: flex;
            align-items: center;

            .tag{
              margin-left: 10px;

              .el-tag {
                height: 20px;
                line-height: 20px;
              }
            }
          }

          .comment-content{
            min-height: 30px;
            padding-top: 5px;
          }

          .right-bottom{
            display: flex;
            align-items:center;

            .reply{
              margin-left: 10px;
            }
          }
        }
      }

      .child {
        display: flex;
        min-height: 80px;
        width: 100%;
        margin-bottom: 10px;

        .left {
          text-align: center;
          width: 60px;
          margin-left: 60px;

          img {
            width: 40px;
            height: 40px;
          }
        }

        .right {
          margin-left: 10px;
          width: 100%;
          border-bottom: 1px solid #d9d9d9;

          .right-top {
            display: flex;
            align-items: center;

            .tag{
              margin-left: 10px;

              .el-tag {
                height: 20px;
                line-height: 20px;
              }
            }
          }

          .comment-content{
            min-height: 30px;
            padding-top: 5px;
          }

          .right-bottom{
            display: flex;
            align-items:center;

            .reply{
              margin-left: 10px;
            }
          }
        }
      }
    }

    .more{
      width:100%;
      display: flex;
      justify-content: center;
      margin-top: 20px;

      .content{
        cursor:pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor:pointer;

        .down{
          padding-top:5px;

          img{
            width: 20px;
            height: 20px;
          }
        }
      }
    }

    .note{
      line-height: 25px;
    }
  }
}
</style>
